<template>
    <div class="mcMainIndexStyle">
        <div class="main">
            <div class="content">
                <div class="treeContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
                    <Button
                        @click="btnChange('1')"
                        :type="typeButton == '1' ? 'primary' : 'default'"
                        style="margin-right: 5px; margin-bottom: 10px"
                        >用能详情</Button
                    >
                    <Button @click="btnChange('2')" :type="typeButton == '2' ? 'primary' : 'default'" style="margin-bottom: 10px"
                        >设备实时</Button
                    >
                    <div>
                        <el-input placeholder="输入关键字搜索" v-model="deviceName" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="searchDevice"></el-button>
                        </el-input>
                        <buildTree
                            :height="secondTableHeight"
                            @handleCurrentChange="handleCurrentChange"
                            name="建筑列表"
                            @dataLoad="spinShow = false"
                            @allData="getAllData"
                            eqtype="DB,SB,QB"
                        ></buildTree>
                    </div>
                </div>

                <div style="margin-top: 0" class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
                    <!-- 用能详情未点到房间了 -->
                    <div v-if="typeButton == '1' && !isHasFloor">
                        <deviceFloor :key="mathKey" :currentNodeId="currentNodeId" :currentNodeName="currentNodeName" :dir="dir">
                        </deviceFloor>
                    </div>
                    <!-- 设备实时 主界面 -->
                    <div v-else-if="typeButton == '2' && !isHasFloor">
                        <div class="listCount">
                            <div class="one">
                                <div class="item">
                                    <div class="leftItem" :class="countType == 1 ? 'hover' : ''" @click="countClick(1)">
                                        <img src="@/assets/images/monitor/sbzs.png" />
                                        <div>
                                            <label>设备总数</label>
                                            <span>
                                                <b>{{ deviceCount?.find((t) => t.name == '设备总数')?.count ?? 0 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="leftItem" :class="countType == 2 ? 'hover' : ''" @click="countClick(2)">
                                        <img src="@/assets/images/monitor/dbzs.png" />
                                        <div>
                                            <label>电表总数</label>
                                            <span>
                                                <b>{{ deviceCount?.find((t) => t.name == '电表')?.count ?? 0 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="leftItem" :class="countType == 3 ? 'hover' : ''" @click="countClick(3)">
                                        <img src="@/assets/images/monitor/sbzs1.png" />
                                        <div>
                                            <label>水表总数</label>
                                            <span>
                                                <b>{{ deviceCount?.find((t) => t.name == '水表')?.count ?? 0 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="leftItem" :class="countType == 4 ? 'hover' : ''" @click="countClick(4)">
                                        <img src="@/assets/images/monitor/wgzs.png" />
                                        <div>
                                            <label>网关总数</label>
                                            <span>
                                                <b>{{ deviceCount?.find((t) => t.name == '网关')?.count ?? 0 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="two">
                                <div class="item">
                                    <div class="rightItem" :class="countType == 5 ? 'hover' : ''" @click="countAllClick('1')">
                                        <div class="itemTop">总在线</div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ sbxq.总在线 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 6 ? 'hover' : ''" @click="countAllClick('2')">
                                        <div class="itemTop">
                                            <iconBorder
                                                outWidth="16px"
                                                inWidth="10px"
                                                bgColor="#EDD46F"
                                                imgSrc="newIndex/warn.png"
                                                :isCenter="false"
                                            ></iconBorder>
                                            总离线
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ sbxq.总离线 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 7 ? 'hover' : ''" @click="countAllClick('3')">
                                        <div class="itemTop">
                                            <iconBorder
                                                outWidth="16px"
                                                inWidth="10px"
                                                bgColor="#E99E53"
                                                imgSrc="newIndex/warn.png"
                                                :isCenter="false"
                                            ></iconBorder>
                                            总告警
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ sbxq.总告警 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="rightItem" :class="countType == 8 ? 'hover' : ''" @click="countAllClick('4')">
                                        <div class="itemTop">
                                            <iconBorder
                                                outWidth="16px"
                                                inWidth="10px"
                                                bgColor="#C83523"
                                                imgSrc="newIndex/warn.png"
                                                :isCenter="false"
                                            ></iconBorder>
                                            总欠费
                                        </div>
                                        <div class="itemBottom">
                                            <span>
                                                <b>{{ sbxq.总欠费 }}</b>
                                                台
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="listLine"></div>
                        </div>
                        <div class="roomContent">
                            <deviceListItem
                                v-if="deviceitem.eq_type != 'QB'"
                                type="1"
                                @currentClick="currentClick"
                                @gotoDetail="gotoDetail"
                                @pageChange="pageChange"
                                :name="currentNodeName"
                                :data="data"
                                :listTreeData="listTreeData"
                                :currentNodeName="currentNodeName"
                                :sbxq="sbxq"
                                ref="deviceListItem"
                                @handleSizeChange="handleSizeChange"
                            ></deviceListItem>

                            <deviceListItemWangGuan
                                v-if="deviceitem.eq_type == 'QB'"
                                @currentClick="currentClick"
                                @gotoDetail="gotoDetail"
                                @pageChange="pageChange"
                                :name="currentNodeName"
                                :data="data"
                                :listTreeData="listTreeData"
                                :currentNodeName="currentNodeName"
                                :currentNodeId="currentNodeId"
                                :sbxq="sbxq"
                                ref="deviceListItem"
                                @handleSizeChange="handleSizeChange"
                            >
                            </deviceListItemWangGuan>
                        </div>
                    </div>
                    <!-- 用能详情点到房间了 -->
                    <energyAnalysis
                        v-else-if="isHasFloor"
                        :deviceInfo="deviceInfo"
                        @back="back"
                        :dir="dir"
                        @showSpin="showSpin"
                    ></energyAnalysis>
                    <div v-else></div>
                </div>

                <deviceTree
                    v-if="currentPage == 'top'"
                    @back="back"
                    :type="deviceType"
                    :currentNodeId="currentNodeId"
                    :currentNodeName="currentNodeName"
                ></deviceTree>
            </div>
            <Spin size="large" fix v-if="spinShow" class="demo-spin">
                <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
                <div>数据加载中...</div>
            </Spin>
            <arrowLeft @arrowChange="arrowChange"></arrowLeft>
        </div>
    </div>
</template>

<script>
// import {Splitpanes, Pane} from "splitpanes"
// import "splitpanes/dist/splitpanes.css"
import Dbzs from '@/assets/images/monitor/dbzs.png'
import Sbzs from '@/assets/images/monitor/sbzs.png'
import Sbzs1 from '@/assets/images/monitor/sbzs1.png'
import Wgzs from '@/assets/images/monitor/wgzs.png'
import {LeftTree, listData} from '@/mockData/monitorCenter.js'
// import {PopupCommon} from "@/libs/popupCommon"
import ElectricityMeter from './electricityMeter.vue'
import energyAnalysis from './energyAnalysis.vue'
import WaterMeter from './waterMeter.vue'
// import GatewayMeter from "./gatewayMeter.vue"
import arrowLeft from '@/components/customComponents/arrowLeft'
import iconBorder from '@/components/newIndex/iconBorder'
import zhaoming from '@/components/newIndex/zhaoming.vue'
import {Utility} from '@/libs/utility.js'
import deviceFloor from './components/deviceFloor'
import deviceListItem from './components/deviceListItem'
import deviceListItemWangGuan from './components/deviceListItemWangGuan'
// import deviceListItem from "@/components/newIndex/deviceListItem"
import buildTree from '@/components/customComponents/managementCenter/buildAllTree'
import deviceTree from './components/deviceTree'
import {AjaxCommon} from '@/libs/apiCommon'
export default {
    components: {
        // Splitpanes,
        // Pane,
        ElectricityMeter,
        WaterMeter,
        // GatewayMeter,
        arrowLeft,
        deviceTree,
        deviceListItem,
        deviceListItemWangGuan,
        deviceFloor,
        iconBorder,
        zhaoming,
        energyAnalysis,
        buildTree
    },
    data() {
        return {
            mathKey: 'test11',
            pageSizes: [],
            countType: '1',
            deviceCount: [],
            spinShow: true,
            buildInfo: {},
            // 用能详情1 或 设备实时2
            typeButton: '1',
            // 是否含有楼层
            isHasFloor: false,
            secondTableHeight: document.body.clientHeight - 210,
            currentNodeId: 1,
            currentNodeName: '',
            deviceType: '1',
            dir: 'left',
            deviceName: '',
            /** 当前页面  index 首页，elec电表，water水表*/
            currentPage: 'index',
            hasIsSizes: true,
            count: listData.filter((t) => t.type != 3).length,
            size: 20,
            current: 1,
            listData: listData.filter((t) => t.type != 3),
            listTreeData: [],
            DbzsImg: Dbzs,
            SbzsImg: Sbzs,
            Sbzs1Img: Sbzs1,
            WgzsImg: Wgzs,
            data: LeftTree,
            // 楼层详情
            floorList: [],
            // 房间详情
            roomList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            sbxq: {
                总告警数: 0,
                一般告警数: 0,
                紧急告警数: 0,
                重要告警数: 0,
                设备数: 0,
                在线: 0,
                离线: 0,
                告警: 0,
                欠费: 0,
                分闸数: 0,
                零能耗数: 0,
                总数: 0
            },
            /** 查询需要的设备信息 */
            deviceitem: {
                /** 建筑id */
                build_id: '',
                /** DB电表，SB水表，QB气表  默认全部为： DB,SB,QB */
                eq_type: 'DB,SB,QB',
                /** 设备名称 */
                eq_name: '',
                /** 设备类型： 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备 */
                typeid: 0
            },
            deviceInfo: {},
            // 左侧树的数据（第一层）
            leftTreeData: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            const list = Utility.arrayFlat(LeftTree, (t) => t.children)
            this.listTreeData = list
            // this.roomList = list.filter((t) => t.id == '999')
            this.getHeight()

            /*窗口自适应，关键代码*/
            window.onresize = () => {
                this.getHeight()
                Utility.debounce(() => this.reGetData(), 500, parseInt(Math.random() * 1000000))
            }
        })
    },
    destroyed() {},
    methods: {
        showSpin(isTrue) {
            this.spinShow = isTrue
        },
        reGetData() {
            if (this.typeButton == '2') {
                this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1)
            }
        },
        getPageSizes() {
            const curWidth = document.body.clientWidth
            let curHeight = 0
            let countValue = 20
            curHeight = document.querySelector('.gjw-list-list')?.clientHeight
            if (curHeight) {
                // 每个110px
                const heightCount = parseInt(curHeight / 110)
                let widthCount = 4
                if (curWidth <= 1450) {
                    widthCount = 4
                } else if (curWidth > 1450 && curWidth < 1910) {
                    widthCount = 5
                } else {
                    widthCount = 6
                }
                countValue = widthCount * heightCount
                this.size = countValue
                this.pageSizes = [countValue, countValue * 2, countValue * 3, countValue * 4, countValue * 5]
            }
        },
        getAllData(d) {
            if (d) {
                const leftTreeData = JSON.parse(d)
                this.leftTreeData = leftTreeData
                this.currentNodeName = leftTreeData[0].title
                this.currentNodeId = leftTreeData[0].id
            }
        },
        async searchDevice() {
            const deviceName = this.deviceName
            this.deviceitem.eq_name = deviceName

            await this.GetDivceCount(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid)
            this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1)
        },
        /** 获取设备总数 */
        async GetEqCount() {
            const data = await AjaxCommon(`api/Eq/GetEqCount`, 'get', null)
            const newData = data.data.Message
            this.deviceCount = newData
        },
        /**
         * 获取设备数量
         * @param build_id
         * @param eq_type DB电表，SB水表，QB气表
         * @param eq_name
         * @param typeid 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
         */
        async GetDivceCount(build_id, eq_type, eq_name, typeid) {
            const params = `/api/Eq/GetDivceCount?build_id=${build_id}&eq_type=${eq_type}&eq_name=${eq_name}&typeid=${typeid}&PageSize=1000&PageIndex=1`
            const data = await AjaxCommon(params, 'get', null)
            const newData = data?.data?.Message ?? {}

            //  返回数据为total 设备总数 is_online在线数 close_state分闸数 zero_energy 零能耗数 offline_device 离线数 alarm_overdue 欠费数量 alarm_sb 设备告警数
            this.sbxq = {
                ...this.sbxq,
                设备数: this.deviceCount?.find((t) => t.name == '设备总数')?.count ?? 0,
                总数: newData.total,
                在线: newData?.is_online ?? 0,
                离线: newData?.offline_device ?? 0,
                告警: newData?.alarm_sb ?? 0,
                欠费: newData?.alarm_overdue ?? 0,
                分闸数: newData?.close_state ?? 0,
                零能耗数: newData?.zero_energy ?? 0
            }
        },

        /**
         * 获取所有设备数量
         * @param build_id
         * @param eq_type DB电表，SB水表，QB气表
         * @param typeid 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
         */
        async GetAllDivceCount(build_id, eq_type, typeid) {
            const params = `/api/Eq/GetDivceCount?build_id=${build_id}&eq_type=${eq_type}&eq_name=&typeid=${typeid}&PageSize=1000&PageIndex=1`
            const data = await AjaxCommon(params, 'get', null)
            const newData = data?.data?.Message ?? {}

            //  返回数据为total 设备总数 is_online在线数 close_state分闸数 zero_energy 零能耗数 offline_device 离线数 alarm_overdue 欠费数量 alarm_sb 设备告警数
            this.sbxq = {
                设备数: this.deviceCount?.find((t) => t.name == '设备总数')?.count ?? 0,
                总数: newData.total,
                在线: newData?.is_online ?? 0,
                离线: newData?.offline_device ?? 0,
                告警: newData?.alarm_sb ?? 0,
                欠费: newData?.alarm_overdue ?? 0,
                分闸数: newData?.close_state ?? 0,
                零能耗数: newData?.zero_energy ?? 0,
                总在线: newData?.is_online ?? 0,
                总离线: newData?.offline_device ?? 0,
                总告警: newData?.alarm_sb ?? 0,
                总欠费: newData?.alarm_overdue ?? 0
            }
        },
        /**
         * 通过建筑树查找设备
         * @param build_id 建筑id
         * @param eq_type DB电表，SB水表，QB气表  默认全部为： DB,SB,QB
         * @param eq_name
         * @param typeid 0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
         * @param PageIndex
         */
        async GetDateDivce(build_id, eq_type, eq_name, typeid, PageIndex, changeSize = true) {
            if (changeSize) {
                this.getPageSizes()
            }

            this.spinShow = true
            // ${this.size}
            const p = `/api/Eq/GetDateDivce?build_id=${build_id}&eq_type=${eq_type}&eq_name=${eq_name}&typeid=${typeid}&PageSize=${this.size}&PageIndex=${PageIndex}`
            const data = await AjaxCommon(p, 'get', null)
            let newData = data?.data?.Message ?? []
            //    switch_state分合闸状态（0：合闸 1：分闸）
            //    is_online当前在线（0：在线 1：离线）
            //     diff_value 当前用量
            //     online_time最近采集时间
            //     END_VALUE最近一次表计读数 RATE 倍率 总用量=END_VALUE*RATE
            //     is_overdue 是否欠费
            //     is_alarm 是否告警
            //     IS_OPEN 是否开户 (0否 1是)

            this.$refs.deviceListItem?.setPageAndData(PageIndex, this.sbxq.总数, newData, this.pageSizes)
            // this.data = newData

            setTimeout(() => {
                this.spinShow = false
            }, 200)
        },
        // GetDateDivce  通过建筑树查找设备
        async handleCurrentChange(d) {
            this.currentNodeId = d.id
            this.currentNodeName = d.text
            const self = this
            self.buildInfo = d
            self.deviceitem.build_id = d.id
            if (this.typeButton == '1') {
                // AjaxCommon(`/api/Build/GetBuildInfo?bd_guid=${d.id}`, 'get', null).then((res) => {
                //     self.buildInfo = res?.data?.Message?.[0] ?? {}
                //     // 区域 A、楼栋 B、楼层 C、房间 D    AREA_TYPE
                //     self.isHasFloor = self.buildInfo.AREA_TYPE == 'D'
                //     self.currentNodeId = self.buildInfo.BD_GUID
                //     if (self.buildInfo.PARENT_BD_GUID) {
                //         // 显示两级
                //         AjaxCommon(`/api/Build/GetBuildInfo?bd_guid=${self.buildInfo.PARENT_BD_GUID}`, 'get', null).then((pRes) => {
                //             const parentData = pRes?.data?.Message?.[0] ?? {}
                //             self.currentNodeName = parentData?.BD_NAME + '   -   ' + self.buildInfo.BD_NAME
                //         })
                //     } else {
                //         self.currentNodeName = self.buildInfo.BD_NAME
                //     }
                //     if (self.buildInfo.AREA_TYPE == 'D') {
                //         self.currentNodeName = self.buildInfo.BD_NAME
                //     }
                // })
            } else {
                // // 获取设备数量 楼层数量通过传建筑ID获取，如总数据不传
                // const params = `/api/Eq/GetDivceCount?build_id={build_id}&eq_type={eq_type}&eq_name={eq_name}&typeid={typeid}&PageSize={PageSize}&PageIndex={PageIndex}`
                // /**
                //  * eq_type:DB电表，SB水表，QB气表
                //  * typeid：0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
                //  */
                // const p = `/api/Eq/GetDateDivce?build_id=${d.id}&eq_type=&eq_name=&typeid=0&PageSize=${this.size}&PageIndex=1`
                // const data = await AjaxCommon(p, 'get', null)
                // console.log(data)
                // // self.data = data?.data?.Message ?? []
                // 建筑

                this.isHasFloor = d.type != 'bd'
                this.currentNodeId = d.id
                this.currentNodeName = d.text

                // // 显示两级
                // var item = this.listTreeData.find((t) => t.id == node.parentId)
                // if (item) {
                //     this.currentNodeName = item.label + '   -   ' + node.label
                // } else {
                //     this.currentNodeName = node.label
                // }
                // if ( d.type != 'bd') {
                //     this.currentNodeName = node.label
                // }

                if (d.type == 'bd') {
                    this.GetEqCount()
                    await this.GetDivceCount(d.id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid)
                    this.GetDateDivce(d.id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1)
                } else {
                    this.spinShow = true
                    // 设备
                    this.deviceInfo = d
                }
            }
        },
        getHeight() {
            this.secondTableHeight = document.body.clientHeight - 210
        },
        async btnChange(type) {
            if (type == 1) {
                const leftTreeData = this.leftTreeData
                this.currentNodeName = leftTreeData[0].title
                this.currentNodeId = leftTreeData[0].id
                this.mathKey = '112test_' + parseInt(Math.random() * 10000)
            }
            this.typeButton = type
            // 设备实时 获取设备信息
            if (type == '2') {
                this.isHasFloor = false
                try {
                    document.getElementsByClassName('ivu-tree')[0].children[0].children[0].children[1].click()
                    const id = this.leftTreeData?.[0]?.id

                    this.GetAllDivceCount(id, 'DB,SB,QB', 0)
                } catch (error) {}
            }
        },
        nodeClick(node) {
            this.isHasFloor = node.type == 'room'
            this.currentNodeId = node.id
            // 显示两级
            var item = this.listTreeData.find((t) => t.id == node.parentId)
            if (item) {
                this.currentNodeName = item.label + '   -   ' + node.label
            } else {
                this.currentNodeName = node.label
            }
            if (node.type == 'room') {
                this.currentNodeName = node.label
            }
        },
        checkNode(checkedNodes, checkedKeys) {
            if (checkedKeys.checkedKeys.length == 0) {
                this.isHasFloor = false
                this.roomList = []
                this.floorList = []
            } else {
                // 如果含有房间
                let hasRoom = checkedKeys.checkedNodes.filter((t) => t.type == 'room')
                // 含有楼层
                let hasFloor = checkedKeys.checkedNodes.filter((t) => t.type == 'floor')
                if (hasRoom.length > 0) {
                    this.roomList = hasRoom
                    this.isHasFloor = false
                    this.floorList = []
                } else if (hasFloor.length > 0) {
                    this.isHasFloor = true
                    this.roomList = []
                    this.floorList = hasFloor
                } else {
                    this.isHasFloor = false
                    this.roomList = []
                    this.floorList = []
                }
            }
        },
        arrowChange(e) {
            this.dir = e
        },
        /** 查看详情 */
        gotoDetail(item) {
            this.deviceInfo = item
            this.isHasFloor = true
        },
        /** 点击进来的位置，1为从监控右侧点击进来，2为左侧建筑树的设备点击进来的 */
        back(e) {
            this.isHasFloor = false
            if (e == 1) {
                this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1)
            } else {
                // 先切换到顶级菜单，这里找不到父级id
                try {
                    document.getElementsByClassName('ivu-tree')[0].children[0].children[0].children[1].click()
                    const id = this.leftTreeData?.[0]?.id
                    this.GetAllDivceCount(id, 'DB,SB,QB', 0)
                } catch (error) {}
            }
        },
        /** 选中的左侧树节点后，点击在线设备等 */
        currentClick(type) {
            console.log(type)
        },
        /** 总设备在线等点击*/
        countAllClick(type) {
            this.deviceitem.typeid = parseInt(type)
            this.countType = parseInt(type) + 4
            this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1)
            //  0 所有；1、在线设备；2、离线设备；3、零能耗设备；4、关停设备
        },
        countClick(type) {
            this.countType = type
            // 重置
            this.deviceitem.typeid = 0
            this.current = 1
            // DB电表，SB水表，QB气表  默认全部为： DB,SB,QB
            if (type == 1) {
                this.deviceitem.eq_type = 'DB,SB,QB'
                // 设备总数
                this.sbxq.总数 = this.deviceCount?.find((t) => t.name == '设备总数')?.count
            }
            if (type == 2) {
                this.deviceitem.eq_type = 'DB'
                this.sbxq.总数 = this.deviceCount?.find((t) => t.name == '电表')?.count
            }
            if (type == 3) {
                this.deviceitem.eq_type = 'SB'
                this.sbxq.总数 = this.deviceCount?.find((t) => t.name == '水表')?.count
            }
            // 网关
            if (type == 4) {
                this.deviceitem.eq_type = 'QB'
                this.sbxq.总数 = this.deviceCount?.find((t) => t.name == '网关')?.count
                return
            }
            this.GetDateDivce(
                this.deviceitem.build_id,
                this.deviceitem.eq_type,
                this.deviceitem.eq_name,
                this.deviceitem.typeid,
                this.current
            )
        },
        getImg(type) {
            return type == 1
                ? require('../../assets/images/monitor/db.png')
                : type == 2
                ? require('../../assets/images/monitor/sb.png')
                : require('../../assets/images/data/wifiWhite.png')
        },
        getHeaderClass(level) {
            return level == 1 ? 'normal' : level == 2 ? 'lx' : 'gj'
        },
        getBottomClass(type, level) {
            if (type == 1 && level == 1) {
                return 'dbzc'
            } else if (type == 2 && level == 1) {
                return 'sbzc'
            } else {
                return 'yc'
            }
        },
        getLevelImg(level) {
            return level == 1
                ? require('../../assets/images/monitor/warn1.png')
                : level == 2
                ? require('../../assets/images/monitor/warn2.png')
                : require('../../assets/images/monitor/warn3.png')
        },
        showDetail(item) {
            console.log(item)
        },
        // 分页点击事件
        pageChange(p) {
            this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, p, false)
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            this.GetDateDivce(this.deviceitem.build_id, this.deviceitem.eq_type, this.deviceitem.eq_name, this.deviceitem.typeid, 1, false)
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-spin {
    background-color: rgba(0, 0, 0, 0.2);
}
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.mcMainIndexStyle {
    width: 100%;
    height: 100%;
    .left {
        left: 230px !important;
    }

    .input-with-select {
        width: 100%;
    }

    .custom-tree-node {
        width: 100%;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .main {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .main .content {
        padding: 0;
        // background-color: #fff;
        display: flex;
        width: 100%;
        height: 100%;

        .rightContent {
            background-color: #fff;
            height: 100%;
            flex: 1;
            text-align: left;
            > div {
                height: 100%;
                width: 100%;
            }
        }
    }

    .leftArrow {
        width: 250px !important;
    }

    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    .leftTable {
        max-width: calc(100% - 260px);
    }

    .rightTable {
        max-width: calc(100% - 0px);
    }

    .treeContent {
        height: 100%;
        padding: 10px;
        transition: transform 0.3s;
        width: 250px;
        background-color: #fff;
        margin-right: 10px;
    }

    .treeMain {
        height: calc(100% - 84px);
        overflow: auto;
        margin-top: 10px;
        font-size: 14px;
    }

    @media screen and (max-width: 1440px) {
        .leftItem {
            img {
                width: 36px !important;
                height: 36px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
            }
            div {
                label {
                    font-size: 12px !important;
                }
                span {
                    font-size: 12px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 12px !important;
            }
            .itemBottom {
                span {
                    font-size: 12px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1440px) {
        .leftItem {
            img {
                width: 50px !important;
                height: 50px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 4px !important;
                margin-right: 4px !important;
            }
            div {
                label {
                    font-size: 13px !important;
                }
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 13px !important;
            }
            .itemBottom {
                span {
                    font-size: 13px !important;
                    b {
                        font-size: 14px !important;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1910px) {
        .leftItem {
            img {
                width: 50px !important;
                height: 50px !important;
                margin-top: 0px !important;
                margin-bottom: 0px !important;
                margin-left: 10px !important;
                margin-right: 10px !important;
            }
            div {
                label {
                    font-size: 14px !important;
                }
                span {
                    font-size: 14px !important;
                    b {
                        font-size: 20px !important;
                    }
                }
            }
        }
        .rightItem {
            .itemTop {
                font-size: 14px !important;
            }
            .itemBottom {
                span {
                    font-size: 14px !important;
                    b {
                        font-size: 20px !important;
                    }
                }
            }
        }
    }

    .listCount {
        height: 70px;
        border: 1px solid #eeeef0;
        position: relative;
        background-color: #f5f9fc;
        border-radius: 4px;
        display: flex;
        gap: 4px;
        width: 100%;
        .item {
            width: calc((100% - 0px) / 4);
            height: 70px;
            display: flex;
        }
        .one {
            width: 55%;
            height: 70px;
            display: flex;
        }
        .two {
            width: 45%;
            height: 70px;
            display: flex;
        }
    }

    .listCountLeft {
        width: 50%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .listCountRight {
        width: 50%;
        float: left;
    }

    .listLine {
        width: 2px;
        height: 45px;
        background-color: #eeeef0;
        position: absolute;
        top: 12.5px;
        left: 54.95%;
    }

    .leftItem {
        text-align: center;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }
    .leftItem:hover {
        background-color: rgba(213, 232, 252, 0.4);
    }
    .rightItem:hover {
        background-color: rgba(213, 232, 252, 0.4);
    }
    .hover {
        // background-color: #d5e8fc;
        // background-color: rgba(213, 232, 252, 0.4);
    }

    .leftItem img {
        width: 50px;
        height: 50px;
        margin: 0 10px;
    }

    .leftItem div {
        display: inline-block;
        line-height: 30px;
        text-align: left;
        cursor: pointer;
    }

    .leftItem div label {
        font-size: 14px;
        display: block;
        cursor: pointer;
    }

    .leftItem div span {
        font-size: 14px;
        color: #757e8b;
    }

    .leftItem div span b {
        font-size: 20px;
        margin-right: 10px;
        color: #333;
    }

    .rightItem {
        width: 100%;
        text-align: center;
        cursor: pointer;
    }

    .rightItem .itemTop {
        font-size: 14px;
        line-height: 35px;
        cursor: pointer;
    }

    .rightItem .itemTop label {
        font-size: 12px;
        width: 10px;
        display: inline-block;
        height: 10px;
        border-radius: 8px;
        margin-right: 10px;
        cursor: pointer;
    }

    .green {
        background-color: #01b77a;
    }

    .gray {
        background-color: #707070;
    }

    .red {
        background-color: #e60000;
    }

    .orange {
        background-color: #ff9900;
    }

    .rightItem .itemBottom {
        margin-top: 0;
    }

    .rightItem .itemBottom span {
        font-size: 14px;
        color: #757e8b;
    }

    .rightItem .itemBottom span b {
        font-size: 20px;
        margin-right: 10px;
        color: #333;
    }

    .selectValue {
        display: flex;
        height: 50px;
        background: #f7f8fc;
        margin-top: 15px;
        border-radius: 4px;
        line-height: 50px;
    }

    .selectValue .value {
        margin-left: 20px;
        font-size: 16px;
    }

    .selectValue .rightValue {
        flex: 1;
        text-align: right;
        margin-right: 20px;
    }

    .selectValue .rightValue span {
        font-size: 16px;
        color: #666;
    }

    .selectValue .rightValue span b {
        font-size: 16px;
        color: #333;
    }

    .selectValue .rightValue span label {
        width: 10px;
        display: inline-block;
        height: 10px;
        border-radius: 10px;
        margin-left: 40px;
        margin-right: 5px;
    }

    .roomContent {
        height: calc(100vh - 230px);
        overflow-y: auto;
    }

    .gjw-list {
        /* height: calc(100vh - 168px); */
        background: #fff;
        margin-top: 10px;
        /* padding: 10px; */
    }

    .gjw-list .gjw-list-list {
        max-height: 220px;
        overflow-y: auto;
        padding-top: 0px;
        margin-bottom: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 10px;
        padding-top: 3px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item {
        margin-right: 10px;
        width: calc((100% - 60px) / 6);
        height: 100px;
        border-radius: 4px;
        background: #fff;
        margin-bottom: 10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
        position: relative;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header {
        font-size: 12px;
        height: 35px;
        line-height: 35px;
        background-color: #55cca4;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        color: #fff;
        overflow: hidden;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .db {
        background-color: #55cca4;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .sb {
        background-color: #6caae5;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header img {
        float: left;
        margin: 10px 6px 0 10px;
        width: 16px;
        height: 16px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header label {
        font-size: 14px;
        float: left;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList {
        float: right;
        height: 35px;
        text-align: right;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .warn {
        float: right;
        margin-right: -10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .level {
        font-size: 12px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .qf {
        float: right;
        width: 10px;
        margin-right: 24px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .status {
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 8px;
        float: right;
        margin-right: 10px;
        margin-top: 14px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .normal {
        background-color: #00ffa9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .lx {
        background-color: #77dbb9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-header .rightItemList .gj {
        background-color: #00ffa9;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom {
        background-color: #e2f7f0;
        height: 65px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .dbzc {
        background-color: #e2f7f0 !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .sbzc {
        background-color: #e9f6fe !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .yc {
        background-color: #f4f4f4 !important;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue {
        font-size: 14px;
        color: #666;
        padding-top: 13px;
        padding-bottom: 3px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .countValue span {
        font-size: 14px;
        color: #333;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue {
        font-size: 14px;
        color: #666;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gjw-list .gjw-list-list .gjw-list-item .item .item-bottom .todayValue span {
        font-size: 14px;
        color: #333;
    }

    .gjw-list .gjw-list-page {
        height: 40px;
        padding-top: 10px;
        text-align: right;
    }

    .cursor {
        cursor: pointer;
    }
}
</style>
